<template>
  <div class="rightButtonGroups">
    <ul>
      <li v-for="(p) in this.productions" v-bind:key="p.id" @click="() => startProduce(p)">
        {{p.taskTag}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "detailMonitorProduct",
  // props:{
  //   riskId: {
  //     type: Number,
  //     default: -1
  //   }
  // },
  data() {
    return {
      productions:[]
    };
  },
  mounted() {
    this.riskId = this.$route.query.id
    this.queryProductions(this.riskId);
  },
  methods: {
    startProduce(val){
      this.$emit("produce", val);
    },

    async queryProductions(val){
      const path = this.$api.taskManageApi.riskTaskQueryId + val;
      this.http.get(path).then((res) => {
        console.log(res.data)
        if(res.data.success){
          this.productions = res.data.data.productType;
          this.productions = this.productions.filter(item => {
            return item.productionTag != "YJZSCP"
          })
          console.log(this.productions)
        }else{
          this.$Message.warning("通过风险id获取产品列表失败")
        }
      })
    },
  },
  watch:{
    disasterId(curVal){
      console.log("changed to", curVal)
      this.queryProductions(curVal);
    }
  }
};
</script>
<style lang="scss">
  #emergencyMonitor .rightButtonGroups {
    position: absolute;
    right: 80px;
    top: 30px;

    display: flex;
    flex-direction: column;
    height: 420px;
    overflow-y: scroll;

    z-index: 2;
  }

  #emergencyMonitor .rightButtonGroups ul{
    text-align: center;
  }

  #emergencyMonitor .rightButtonGroups li{
    list-style: none;
    color: white;
    background-color: #5290E8;
    margin: 10px;
    padding: 8px;
    font-size: medium;
  }

  #emergencyMonitor .rightButtonGroups li:hover{
    opacity: 0.8;
    cursor: pointer;
  }

  // Overwrite the position of tooltips, otherwise it will overlay other buttons
  /*
  #emergencyMonitor .ivu-tooltip-popper {
    left: -100px !important;
    top: -8px !important;
  }

  #emergencyMonitor .ivu-tooltip {
    position: relative;
  }
  */
</style>